<template>
  <div class="main">
    <el-card>
      <!-- 头部 -->
      <el-row type="flex" justify="space-between" class="header">
        <el-button size="small" type="primary" @click="addFn">添加房产</el-button>
        <el-row type="flex">
          <!-- 选择器 -->
          <el-select v-model="cate" placeholder="请选择">
            <el-option value="" label="全部分类" />
            <el-option v-for="item in cateList" :key="item.id" :value="item.id" :label="item.title" />
          </el-select>
          <el-select v-model="agent" placeholder="请选择">
            <el-option value="" label="全部经纪" />
            <el-option v-for="item in agentList" :key="item.id" :value="item.id" :label="item.name" />
          </el-select>
          <!-- 搜索框 -->
          <el-input v-model="searchInp" placeholder="请输入内容" />
          <el-button @click="searchFn">筛选</el-button>
        </el-row>
      </el-row>
      <!-- 内容 -->
      <el-table
        :data="proList"
        border
        style="width: 100%"
        align="center"
      >
        <el-table-column
          prop="image"
          label="封面"
        >
          <template #default="{row}">
            <img :src="row.image" alt="">
          </template>

        </el-table-column>
        <el-table-column
          prop="title"
          label="标题"
        />
        <el-table-column
          prop="tags"
          label="标签"
        >
          <template #default="{row}">
            <el-tag v-for="item in row.tags" :key="item.id">{{ item }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
        />
        <el-table-column
          prop="category.title"
          label="分类"
        />
        <el-table-column
          prop="agent.name"
          label="经纪"
        />
        <el-table-column
          prop="price"
          label="价格"
        />
        <el-table-column
          prop="desc"
          label="介绍"
        />
        <el-table-column
          prop="photos"
          label="图片"
        >
          <template #default="{row}">
            <div style="height:200px;overflow:auto">
              <img v-for="(item,index) in row.photos" :key="index" :src="item" alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column>
          <template #default="{row}">
            <el-row style="margin-bottom:15px">
              <el-button type="primary" size="small" @click="editFn(row.id)">编辑</el-button>
            </el-row>
            <el-row>
              <el-button type="danger" size="small" @click="delFn(row.id)">删除</el-button>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="center">
        <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          :current-page="page"
          @current-change="currentChange"
        />
      </el-row>
    </el-card>
    <Dialog ref="Dialog" :is-show-dialog.sync="isShowDialog" :cate-list="cateList" :agent-list="agentList" :click-btn.sync="clickBtn" @updataProList="getProList(cateData, agentData, searchData)" />
  </div>
</template>

<script>
import { delProperty, getPropertyList, getTotal } from '@/api/property'
import { getcategotyList } from '@/api/Category'
import { getAgents } from '@/api/agents'
import Dialog from './components/Dialog.vue'
export default {
  components: { Dialog },
  data() {
    return {
      isShowDialog: false,
      cate: '',
      cateData: '',
      agent: '',
      agentData: '',
      searchInp: '',
      searchData: '',
      cateList: [],
      agentList: [],
      proList: [],
      total: 0,
      page: 1,
      pageSize: 2,
      clickBtn: true
    }
  },
  created() {
    this.getProList()
  },
  methods: {
    // 获取房产列表(很长)
    async getProList(cates, agents, searchData) {
      const pageConfig = { _limit: this.pageSize, _start: (this.page - 1) * this.pageSize }
      let config = { title_contains: searchData }
      // 当分类或经纪为空时传值category_contains会导致出问题
      if (cates) {
        config = { ...config, category: cates }
      }
      if (agents) {
        config = { ...config, agent: agents }
      }
      const { data } = await getPropertyList({ ...pageConfig, ...config })
      // 获取总数
      const Total = await getTotal(config)
      // 获取分类列表
      const cate = await getcategotyList({ _limit: 10000 })
      // 获取经纪列表
      const agent = await getAgents({ _limit: 10000 })
      this.cateList = cate.data
      this.agentList = agent.data
      this.proList = data
      this.total = Total.data
      // 解决筛选时编辑筛选项最后一项后导致页面变空的问题
      if (this.proList.length === 0 && this.page > 1) {
        this.page--
        this.getProList()
      }
    },
    // 删除
    async delFn(id) {
      await this.$confirm('确定要删除？')
      await delProperty(id)
      if (this.page > 1 && this.proList.length === 1) {
        this.page--
      }
      this.$message.success('删除成功')
      this.getProList()
    },
    // 翻页
    currentChange(val) {
      this.page = val
      this.getProList(this.cateData, this.agentData, this.searchData)
    },
    // 搜索
    searchFn() {
      this.cateData = this.cate
      this.agentData = this.agent
      this.searchData = this.searchInp
      this.page = 1
      this.getProList(this.cateData, this.agentData, this.searchData)
    },
    // 编辑按钮
    editFn(id) {
      this.isShowDialog = true
      this.clickBtn = false
      this.$refs.Dialog.getProDetail(id)
    },
    // 添加按钮
    addFn() {
      this.isShowDialog = true
      this.clickBtn = false
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
  margin: 20px;
  .header{
    padding-bottom: 30px;
    border-bottom: 1px solid #ccc;
  }
}
img{
  width: 100px;
}
</style>
